<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台管理</title>
    <link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/googlecode.min.css" rel="stylesheet">
    <link href="../common/iconfont.css" rel="stylesheet" />
    <link href="../common/article.min.css" rel="stylesheet" />
    <link href="./index.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <!--侧栏-->
        <lt-nav @ltnavclick="eComponentChange"></lt-nav>
        <div class="m-ct">
            <div class="m-md">
                <header class="m-hd s-bg">
                    <div class="g-lt">
                        <div class="s-ct">
                            <!--dalao头像-->
                            <div class="u-user-img">
                                <img src="http://imgsrc.baidu.com/forum/w=580/sign=54cd042fd5c451daf6f60ce386fd52a5/25af400ed9f9d72a2f418c6cdc2a2834359bbbfa.jpg" />
                            </div>
                            <!--dalao的博客名-->
                            <p><b>dalao</b>的博客</p>
                        </div>
                        <!--B站模糊效果-->
                        <div class="s-mask">
                            <!--垃圾IE-->
                            <div class="s-blur s-bg"></div>
                        </div>
                    </div>
                </header>
                <transition name="cpmt" mode="out-in">
                    <component :is="getCpmt"></component>
                </transition>
            </div>
        </div>
    </div>
    <div id="template">

        <!--导航组件-->
        <template id="lt_nav">
            <aside>
                <nav>
                    <a v-for="item,index in aNavItems" :class="{'z-atv':index==isAtv,'z-show':isShow}" @click="eItemClick(index)">
                        <i class="u-icon" v-html="item.icon"></i>
                        <span>{{item.title}}</span>
                    </a>
                </nav>
            </aside>
        </template>

        <!--分页组件-->
        <template id="pageIng">
            <div class="m-paging">
                <a @click="ePreClick">上一页</a>
                <a v-for="item,index in aPage" :class="{'z-atv':item==isPage}" @click="eItemClick(item)">{{item}}</a>
                <a @click="eNextClick">下一页</a>
            </div>
        </template>

        <!--列表组件-->
        <template id="list_article">
            <section class="m-list_article">
                <h2 class="m-tt">{{title}}</h2>
                <!--控制栏-->
                <header class="m-hd_ctrl">
                    <a class="u-btn">全选</a>
                    <a class="u-btn">删除</a>
                    <div class="f-m">
                        <label class="u-label_udl">
                            <input type="text" class="u-txt" placeholder="搜索"/>
                            <i class="u-icon">&#xe6ac;</i>
                        </label>
                        <a class="u-btn">搜索</a>
                    </div>
                </header>
                <!--表格-->
                <div class="m-tb">
                    <table>
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>标题</th>
                                <th>创建时间</th>
                                <th>访问量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>3</td>
                                <td>2</td>
                                <td>4</td>
                                <td>5</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <m-paging></m-paging>
            </section>
        </template>

        <!--文章编辑页面-->
        <template id="write_article">
            <!--暂时先这样。。。等后续dalao的文档。。。-->
            <section class="edit-article">
                <h2  class="m-tt">写文章</h2>
                <div>
                    <label class="u-label_udl">
                        <input maxlength="50" type="text" class="u-txt" placeholder="博文标题" v-model="title"/>          
                        <span>{{title.length}}/50</span>
                        <i class="u-icon">&#xe605;</i>
                    </label>
                </div>
                <editer></editer>
            </section>
        </template>

        <!--添加友链-->
        <template id="add_link">
            <section class="m-add_link">
                <h2 class="m-tt">添加友链</h2>
                <form>
                    <div class="g-line">
                        <label class="u-label_udl">
                            <span>链接地址</span>
                            <input type="text" class="u-txt" placeholder="请输入链接地址"/>
                        </label>
                    </div>
                    <div class="g-line">
                        <label class="u-label_udl">
                            <span>友链名称</span>
                            <input type="text" class="u-txt" placeholder="请输入友链名称"/>
                        </label>
                    </div>
                    <a class="u-btn">提交</a>
                </form>
            </section>
        </template>

        <!--账户管理-->
        <template id="set_user">
            <section class="m-set_user">
                <h2 class="m-tt">账户管理</h2>
                <form>
                    <div class="m-info">
                        <h3>博客头像</h3>
                        <div class="g-line">
                            <div class="u-user-img">
                                <img :src="hdImg" />
                            </div>
                            <label class="u-file">
                                <a class="u-btn">请选择文件</a>
                                <input type="file" @change="eChooseFile($event)"/>
                            </label>
                        </div>
                    </div>
                    <div class="m-info">
                        <h3>简介？</h3>
                        <div class="u-summary">
                            <textarea  placeholder="请输入简介"></textarea>
                        </div>
                    </div>
                    <div class="m-info">
                        <h3>修改密码</h3>
                        <div class="g-line">
                            <label class="u-label_udl">
                                <span>旧密码</span>
                                <input type="password" class="u-txt" placeholder="请输入旧密码"/>
                            </label>
                        </div>
                        <div class="g-line">
                            <label class="u-label_udl">
                                <span>新密码</span>
                                <input type="password" class="u-txt" placeholder="请输入新密码"/>
                            </label>
                        </div>
                    </div>
                    <a class="u-btn">保存</a>
                </form>
            </section>
        </template>

        <!--编辑器-->
        <template id="articleEditer">
            <div class="m-editer-area" :class="{'z-full':isScreen}">
                <header>
                    <a class="u-icon" v-for="(item,index) in aNavItems" v-html="item.icon" :title="item.title" :class="{'z-atv':item.isAtv}" @click="eNavItemClick(index)"></a>
                    <a class="u-icon u-screen-tab" v-html="sScreenStatus" @click="eScreenTabClick"></a>
                </header>
                <section>
                    <div class="u-wirte" :class="{'z-half':aEditerModule[1]}">
                        <textarea placeholder="正文" v-model="content" @keyDown="eEditerKeyDown($event)"></textarea>
                    </div>
                    <div class="u-view" :class="{'z-half':aEditerModule[1],'z-atv':aEditerModule[2]}">
                        <article v-html="preViewContent"></article>
                    </div>
                </section>
                <footer>
                    <p>共<b>{{content.length}}</b>字节</p>
                    <a @click="isDialog=!isDialog">提交</a>
                    <a>取消</a>
                </footer>
                <transition name="dialog">
                    <m-dialog v-if="isDialog">
                        <span slot="tt">报告</span>
                        <p>文章已经提交</p>
                        <a class="u-btn" slot="ft" @click="isDialog=!isDialog">确定</a>
                    </m-dialog>
                </transition>
            </div>
        </template>

        <!--alert组件-->
        <template id="alert">
            <div class="m-dialog">
                <div class="s-mask"></div>
                <div class="m-dialog-box">
                    <div class="m-dialog_title">
                        <slot name="tt"></slot>
                    </div>
                    <div class="m-dialog_content">
                        <slot></slot>
                    </div>
                    <div class="m-dialog_foot">
                        <slot name="ft"></slot>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <script src="http://cdn.bootcss.com/marked/0.3.6/marked.js"></script>
    <script src="http://cdn.bootcss.com/highlight.js/9.8.0/highlight.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script src="./index.js"></script>
</body>

</html>